<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>collections</title>
    <script src="jquery/jquery-1.11.2.js"></script>
    <script src="underScore/underscore.js"></script>
    <script src="backbone-min.js"></script>
</head>
<body>
<h3>
    fetch create add remove reset
</h3>
<script>
    (function($){
        var Book = Backbone.Model.extend({
            defaults:{
                title:'default'
            },
            initialize:function(){

            }
        });
        var BookShelf = Backbone.Collection.extend({
            model:Book
        });
        var book1 = new Book({title:'book1'});
        var book2 = new Book({title:'book2'});
        var book3 = new Book({title:'book3'});
        var book4 = new Book({title:'book4'});

        var bookShelf = new BookShelf;
        bookShelf.add(book1);
        bookShelf.add(book2);
        bookShelf.add(book3);
        bookShelf.add(book4);
        bookShelf.remove(book3);

        var showAllBooks = function(){
            bookShelf.each(function(book){
                console.log(book);
                alert(book.get('title'));
            });
        };
        //reset会整个清空collection重新添加所有model
        bookShelf.bind('reset',showAllBooks);

        bookShelf.url = 'index.json';
        bookShelf.fetch({
            reset:true,
            success:function(collection,response,options){
                console.log(collection);
                collection.each(function(book){
                    alert(book.get('lastName'));
                });
            },
            error:function(collection,response,options){
                alert('error');
            }
        });

        var newBooks = Backbone.Collection.extend({
            model:Book,
            url:'index1.php'
        });
        var books = new newBooks;
        var oneBook = books.create({
            title:"I am coming",
        })

    })(jQuery);
</script>
</body>
</html>